<template>

  <div class="app-container">
    <el-form :inline="true"  class="search_form">
      <el-form-item>
        <el-input v-model="searchVal"  placeholder="请输入手机号或邮箱"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
      </el-form-item>
    </el-form>


    <el-table
      v-loading="listLoading"
      :data="list"
      style="width: 90%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        prop="id"
        label="ID"
      >
      </el-table-column>
      <el-table-column
        prop="telphone"
        label="手机号"
      >
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="invita_code"
        label="邀请码">
      </el-table-column>
      <el-table-column
        prop="invita_num"
        label="邀请数量">
      </el-table-column>
    </el-table>

    <el-pagination
      background
      style="margin-left:40%;margin-top: 20px"
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :total="countSize"
      :page-size="pageSize"
      :hide-on-single-page="true"
    >
    </el-pagination>
  </div>
</template>

<script>
  import { userList } from '@/api/user'
  import _ from 'lodash'
  export default {
    data() {
      return {
        list: null,
        listLoading: true,
        currentPage: 1,//当前页
        pageSize:10,//每页显示几条
        countSize: 100,//总数量
        searchVal:'',//搜索内容
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex%4 === 1) {
          return 'warning-row';
        } else if (rowIndex%4 === 3) {
          return 'success-row';
        }
        return '';
      },
      fetchData() {
        this.listLoading = true
        let params = {currentPage:this.currentPage,pageSize:this.pageSize,searchVal:this.searchVal}
        userList(params).then(response => {
          this.list = _.get(response.data,'list',[])
          this.countSize = parseInt(_.get(response.data,'total',0))
          this.listLoading = false
        })
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
        this.fetchData()
      },
    }
  }
</script>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .search_form{
    width: auto;
    float: right;
  }
</style>
